<!--这是试卷设置-->
<template>
	<div>
    <div>
			<div v-if="permission == 3">
        <router-link :to="{path:'/testManage/createPaper/0'} ">
				<el-button type="primary" @click="linkToAdd">新增试卷</el-button>
			    </router-link>
			</div>
			<div style="margin-top: 20px">
				<el-select v-model="listQuery.isGrounding" clearable placeholder="请选择" style="width: 100px">
			    	<el-option value="1" label="已发布"></el-option>
			    	<el-option value="-1" label="未发布"></el-option>
				</el-select>
				<el-input v-model="listQuery.searchName" placeholder="请输入试卷名称" @keyup.enter.native="handleFilter" style="width: 250px"></el-input>
				<el-button class="search" type="primary" icon="el-icon-search"  @click="handleFilter">搜索</el-button>
			</div>
		</div>
		<div>
			<el-table :data="tableData" row-key="id"  :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading"  element-loading-text="加载中..." fit highlight-current-row style="width: 100%;font-size: 12px;margin-top: 20px;">
			 	<el-table-column width="150" align="center" label="名称">
			        <template slot-scope="scope">
			          <span>{{scope.row.name}}</span>
			        </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="单选题数">
          <template slot-scope="scope">
            <span>{{scope.row.singleChoiceNum}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="多选题数">
          <template slot-scope="scope">
            <span>{{scope.row.multipleChoiceNum}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="是否已完成编辑">
          <template slot-scope="scope">
            <span v-if="scope.row.hasComplete == 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="考试结果展现形式">
          <template slot-scope="scope">
            <span v-if="scope.row.scoringMethod == 1" style="color:#409EFF;">正确率</span>
            <span v-else style="color:red;">总分</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="排序(前端展示)">
          <template slot-scope="scope">
            <span>{{scope.row.sort}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="是否评语">
          <template slot-scope="scope">
            <span v-if="scope.row.isRemark == 1 || scope.row.isRemark == 2 ">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="测试人数">
          <template slot-scope="scope">
            <span>{{scope.row.examPeopleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="是否发布">
          <template slot-scope="scope">
            <span v-if="scope.row.isGrounding == 1 ">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <p v-if="permission == 3" style="margin-bottom: 10px;">
              <router-link :to="{path:'/testManage/editPaper/' + scope.row.paperMainId + '/0'} ">
              <b>编辑</b>
              </router-link>
              <span class="color-409">|</span>
              <b @click="certainPublish(scope.row.paperMainId,3)">删除</b>
              <span class="color-409">|</span>
              <b @click="linkToSubject(scope.row.paperMainId)">题目设置</b>
            </p>
            <p>
              <b v-if="permission == 3" style="margin-left: 0" v-show="scope.row.isGrounding=='-1'"
                         @click="certainPublish(scope.row.paperMainId,1)">发布
              </b>
              <span v-if="permission == 3" v-show="scope.row.isGrounding=='-1'" class="color-409">|</span>
              <b v-if="permission == 3" style="margin-left: 0;padding:0;" v-show="scope.row.isGrounding=='1'"
                         @click="certainPublish(scope.row.paperMainId,2)">取消发布
              </b
              ><span v-if="permission == 3" v-show="scope.row.isGrounding=='1'" class="color-409">|</span>
              <b @click="toPreview(scope.row.paperMainId)">预览</b>
              <span v-if="permission == 3" class="color-409">|</span>
              <b v-if="permission == 3" @click="toShowTopic(scope.row.paperMainId)">添加专题</b>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
    </div>
    <previewPaper v-show="isShowPreview" @hidePreview="hidePreview" :paperId="this.paperId"></previewPaper>
    <add-topics v-show="isShowAddTopics" @hideAddTopic="hideAddTopic" :paperId="this.paperId"></add-topics>
  </div>
</template>

<script>
  import previewPaper from './components/previewPaper.vue'
  import addTopics from './components/addTopics.vue'
  import { toGetPapersList, handlePaper } from '@/api/paper'
  import { knowledge_test } from '@/utils/permission'
  export default {
    components: {
      previewPaper,
      addTopics
    },
    data() {
      return {
        permission: 3,
        listQuery: {
          page: 1,
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          isGrounding: null, // 搜索的状态(已发布未发布)
          searchName: null,
          limit: null
        },
        isShowPreview: false, // 是否显示试卷预览
        isShowAddTopics: false, // 是否显示添加专题
        tableData: null,
        paperId: null,
        listLoading: null
      }
    },
    created() {
      this.getModelPermission()
      this.getPaperList()
    },
    methods: {
      getModelPermission() {
        this.permission = knowledge_test()
      },
      getPaperList() {
        this.listLoading = true
        // 根据ID查找该专题下得试卷
        toGetPapersList(this.listQuery).then(res => {
          // 正确回调
          this.tableData = res.data.data.data
          this.listQuery.total = res.data.data.total
          this.listLoading = false
        })
          .catch(err => {
            console.log(err)
          })
      },
      hidePreview(msg) {
        this.isShowPreview = msg
      },
      hideAddTopic(msg) {
        this.isShowAddTopics = msg
      },
      linkToAdd() {
        this.$router.push({ path: `/testManage/createPaper` })
      },
      linkToEdit(id) {
        this.$router.push({ path: `/testManage/editPaper/${id}` })
      },
      linkToSubject(id) {
        this.$router.push({ path: `/testManage/subject/${id}`, query: {}})
      },
      certainPublish(thePaperId, type) {
        if (type == 1) {
          this.tip = '发布'
        } else if (type == 2) {
          this.tip = '取消发布'
        } else if (type == 3) {
          this.tip = '删除'
        }

        this.$confirm('确定' + this.tip + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
          center: true
        }).then(() => {
          this.condition = { 'thePaperId': thePaperId, 'type': type }
          handlePaper(this.condition).then(res => {
            // 正确回调
            if (type == 1) {
              if (res.data.data.status == 2) {
                this.$message({
                  type: 'info',
                  message: '该试卷不属于任何一个专题，不允许发布'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: this.tip + '成功!'
                })
                this.getPaperList()
              }
            } else {
              this.$message({
                type: 'success',
                message: this.tip + '成功!'
              })
              this.getPaperList()
            }
          })
            .catch(err => {
              console.log(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '用户取消'
          })
        })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        this.listQuery.limit = val
        this.getPaperList(this.listQuery)
      },
      handleCurrentChange(val) { // 切换当前页
        this.listQuery.page = val
        this.getPaperList()
      },
      toPreview(paperId) {
        this.isShowPreview = true
        this.paperId = paperId
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getPaperList()
      },
      toShowTopic(paperId) {
        this.isShowAddTopics = true
        this.paperId = paperId
      }
    },

    mounted() {

    }
  }
</script>
<style scoped>

</style>
